<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>查询商品</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
        .div-content{

            background-color:white;
            border-radius: 5px;
            padding: 15px;

        }
        .table-search-fieldset {
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
        }
    </style>
</head>
<body>
<div class="div-content">
<form class="layui-form layui-form-pane" id="form-search" style="margin-bottom: 20px">
    <fieldset class="table-search-fieldset">
        <legend>
            搜索条件
        </legend>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品编号:</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="commodity" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">商品名称:</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">货物类型</label>
                <div class="layui-input-inline">
                    <select name="species"  >
                        <option value="">点击进行选择</option>
                        <option value="CPU">CPU</option>
                        <option value="主板">主板</option>
                        <option value="显卡">显卡</option>
                        <option value="内存">内存</option>
                        <option value="固态硬盘">固态硬盘</option>
                        <option value="机械硬盘">机械硬盘</option>
                        <option value="散热器">散热器</option>
                        <option value="散热风扇">散热风扇</option>
                        <option value="电源">电源</option>
                        <option value="机箱">机箱</option>
                        <option value="显示器">显示器</option>
                        <option value="键盘">键盘</option>
                        <option value="鼠标">鼠标</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"> 品 牌 </label>
                <div class="layui-input-inline">
                    <select name="brand"  >
                        <option value="">点击进行选择</option>
                        <option value="华硕（ASUS)">华硕（ASUS）</option>
                        <option value="微星（MSI)">微星（MSI）</option>
                        <option value="技嘉 （GIGABYTE）">技嘉 （GIGABYTE）</option>
                        <option value="七彩虹（Colorful）">七彩虹（Colorful）</option>
                        <option value="英特尔（Intel）">英特尔（Intel）</option>
                        <option value="铭瑄（MAXSUN）">铭瑄（MAXSUN）</option>
                        <option value="影驰（Galaxy）">影驰（Galaxy）</option>
                        <option value="金士顿 (Kingston)">金士顿 (Kingston)</option>
                        <option value="三星 （SAMSUNG）">三星 （SAMSUNG）</option>
                        <option value="西部数据（Western Digital）">西部数据（Western Digital）</option>
                        <option value="联想（Lenovo)">联想（Lenovo) </option>
                        <option value="光威（Gloway）">光威（Gloway）</option>
                        <option value="先马（SAMA）">先马（SAMA）</option>
                        <option value="长城（Great Wall）">长城（Great Wall）</option>
                        <option value="罗技（G）">罗技（G）</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
            </div>

        </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">规格</label>
                    <div class="layui-input-inline">
                        <select name="specifications"  >
                            <option value="">点击进行选择</option>
                            <option value="全新">全新</option>
                            <option value="9成新">9成新</option>
                            <option value="女生自用99新">女生自用99新</option>
                        </select>
                    </div>
                </div>


            <div class="layui-inline" style="margin-left: 1000px">
                <button id="btn-search" lay-submit lay-filter="bt-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button id="btn-reset"  type="reset" class="layui-btn layui-btn-radius  layui-btn-primary">
                    <i class="layui-icon layui-icon-fonts-clear"></i>
                    重置
                </button>
            </div>
        </div>
    </fieldset>

</form>
<table id="table-parts" lay-filter="table-parts-filter"></table>

</div>

<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">
    var ctxPath = [[@{/}]];
        // 表单
        layui.use(['form','table'], function(){
            var form = layui.form
                ,table = layui.table
            var $ = layui.$;

            // 监听查询
            form.on('submit(bt-search-filter)', function (data) {

                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                // 刷新表格
                table.reload('table-parts', {
                    where: { //设定异步数据接口的额外参数，任意设
                        commodity: data.field.commodity,
                        species: data.field.species,
                        brand: data.field.brand,
                        name: data.field.name,
                        specifications: data.field.specifications

                        //…
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });

                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            //员工列表表格渲染
            table.render({
                elem: '#table-parts'
                , url: ctxPath + 'parts/list' //数据接口
                , page: true //开启分页
                , height: 'full-220'
                , limits: [10, 20, 30, 50, 100]
                , limit: 13
                , cols: [[ //表头
                    {field: 'commodity', title: '货物编号', align: 'center',width:'100'}
                    , {field: 'species', title: '货物类型', align: 'center',width:'100'}
                    , {field: 'brand', title: '货物品牌', align: 'center',width:'200'}
                    , {field: 'name', title: '货物名称', align: 'center',width:'500'}
                    , {field: 'specifications', title: '规格', align: 'center',width:'200'}
                    , {field: 'supplier', title: '供应商', align: 'center',hide: 'ture'}
                    , {field: 'warehouse', title: '存放仓库', align: 'center',width:'100'}
                    , {field: 'time', title: '入库日期', align: 'center', sort: true,hide: 'ture'}
                    , {field: 'quantity', title: '数量', align: 'center', sort: true,width:'100'}
                    , {field: 'sal', title: '价格', align: 'center', sort: true,width:'100'}
                    , {field: 'people', title: '负责人', align: 'center',hide: 'ture'}
                    , {field: 'record', title: '备注', align: 'center',width:'300'}
                ]]
            });



        });




</script>
</body>
</html>